<template>
  <!--悬浮显示框-->
  <div id="inform" class="inform" style="display: none"></div>

  <!-- 主体 -->
  <div class="mainBox">

    <div class="topBg"></div>

    <!-- 宠物目录 -->
    <div class="PetDisplay">

      <p id="pickMeUp">Pick Me Up</p>
      <div class="petCategory">
        <ul>
          <!--          注释掉了两个方法 onmouseover="showInform(id);" onmouseout="hiddenInform(event)"-->
          <li id="cats" class="nav1"></li>
          <li id="dogs" class="nav2"></li>
          <li id="reptiles" class="nav3"></li>
          <li id="birds" class="nav4"></li>
          <li id="fish" class="nav5"></li>
        </ul>
      </div>
    </div>

    <!-- 展示 -->
    <div class="AllPets">
      <ul class="item">
        <li id="toCats" class="petLi" v-for="pet in cats">
          <img :src=this.convertToDataUrl(pet.images)>
          <p>{{ pet.description }}</p><br>
          <h2>{{ pet.name }}</h2><br>
          <router-link :to="{name:'productForm',params:{id:pet.productId}}">
            <button class="petDetBtn">详细</button>
          </router-link>
        </li>

        <li id="toDogs" class="petLi" v-for="pet in dogs">
          <img :src=this.convertToDataUrl(pet.images)>
          <p>{{ pet.description }}</p><br>
          <h2>{{ pet.name }}</h2><br>
          <router-link :to="{name:'productForm',params:{id:pet.productId}}">
            <button class="petDetBtn">详细</button>
          </router-link>
        </li>

        <li id="toReps" class="petLi" v-for="pet in reps">
          <img :src=this.convertToDataUrl(pet.images)>
          <p>{{ pet.description }}</p><br>
          <h2>{{ pet.name }}</h2><br>
          <router-link :to="{name:'productForm',params:{id:pet.productId}}">
            <button class="petDetBtn">详细</button>
          </router-link>
        </li>

        <li id="toBirds" class="petLi" v-for="pet in birds">
          <img :src=this.convertToDataUrl(pet.images)>
          <p>{{ pet.description }}</p><br>
          <h2>{{ pet.name }}</h2><br>
          <router-link :to="{name:'productForm',params:{id:pet.productId}}">
            <button class="petDetBtn">详细</button>
          </router-link>
        </li>

        <li id="toFish" class="petLi" v-for="pet in fishs">
          <img :src=this.convertToDataUrl(pet.images)>
          <p>{{ pet.description }}</p><br>
          <h2>{{ pet.name }}</h2><br>
          <router-link :to="{name:'productForm',params:{id:pet.productId}}">
            <button class="petDetBtn">详细</button>
          </router-link>
        </li>

      </ul>
    </div>
    <pageBottom/>
  </div>
</template>

<script>
import pageBottom from "@/components/PageBottom";
import $ from 'jquery'
import axios from "axios";

export default {
  name: "main",
  components: {pageBottom},
  data() {
    return {
      cats: [],
      dogs: [],
      birds: [],
      reps: [],
      fishs: [],
      //购物车
      cart: {
        "cartItems": [],
        "numberOfItems": 0,
        "subTotal": 0,
        "cartItemList": [],
        "allCartItems": []
      },
    }
  },
  mounted() {
    this.init()
    this.getAllPets()

    window.addEventListener('scroll', this.scroll)

    //保留浏览位置
    this.$nextTick(() => {
          var lastPosition = localStorage.getItem('lastPosition');
          console.log(lastPosition)
          if (lastPosition && lastPosition !== 'null') {
            window.scrollTo(0, lastPosition);
            localStorage.removeItem('lastPosition');
          }
        }
    )

    //宠物目录
    $(".nav1").click(function () {
      $("html,body").animate({scrollTop: $('#toCats').offset().top - 80}, 500);

    });

    $(".nav2").click(function () {
      $("html,body").animate({scrollTop: $('#toDogs').offset().top - 80}, 500);

    });

    $(".nav3").click(function () {
      $("html,body").animate({scrollTop: $('#toReps').offset().top - 80}, 500);

    });

    $(".nav4").click(function () {
      $("html,body").animate({scrollTop: $('#toBirds').offset().top - 80}, 500);

    });

    $(".nav5").click(function () {
      $("html,body").animate({scrollTop: $('#toFish').offset().top - 80}, 500);

    })
  },
  beforeRouteLeave() {
    localStorage.setItem('lastPosition', window.scrollY);
    window.removeEventListener('scroll', this.scroll)


    if ($('.top').is('.change_color')) {
      $('.top').removeClass('change_color');
      $('.trCorner li').removeClass('change_color');
      $('.trCorner li a').removeClass('change_color');
    }
  },

  methods: {
    init() {
      //初始化购物车
      const cartStr = JSON.stringify(this.cart)
      //生命周期是永久，除非主动清除localStorage信息，否则这些信息将一直存放在客户端
      localStorage.setItem('cart', cartStr)
    },
    // 导航栏滚动变色显示
    scroll() {
      var top = $(".PetDisplay").offset().top;//获取宠物展示位置距顶部的高度
      var scrollTop = $(window).scrollTop();//获取当前窗口距顶部的高度
      if (scrollTop > top) {

        $('.top').addClass('change_color');
        $('.trCorner li').addClass('change_color');
        $('.trCorner li a').addClass('change_color');
        $('#auto').addClass('change_color2');

      } else if (scrollTop <= top - 50) {
        $('.top').removeClass('change_color');
        $('.trCorner li').removeClass('change_color');
        $('.trCorner li a').removeClass('change_color');
        $('#auto').removeClass('change_color2');

      }
    },

    //获取宠物
    getAllPets() {
      axios({
        url: "http://127.0.0.1:8088/catalog/mainForm",
        method: 'get',
        headers: {
          'Content-Type ': 'multipart/form-data'
        }
      }).then((res) => {
        let arr = res.data.data;
        this.cats = arr.filter(item => item.categoryId == 'CATS');
        this.dogs = arr.filter(item => item.categoryId == 'DOGS');
        this.reps = arr.filter(item => item.categoryId == 'REPTILES');
        this.birds = arr.filter(item => item.categoryId == 'BIRDS');
        this.fishs = arr.filter(item => item.categoryId == 'FISH');
      })
          .catch((err) => {
            console.log(err)
          });
    },

    //图片处理
    convertToDataUrl(bytes) {
      return "data:image/png;base64," + bytes
    }
  }
}
</script>

<style scoped>
@font-face {
  font-family: 'huayuan';
  src: url(@/assets/font/花园肉丸.ttf);
}

@font-face {
  font-family: 'cm';
  src: url(@/assets/font/Begilas.otf);
}

.top {
  z-index: 3;
  height: 70px;
  top: 0px;
  position: fixed;
  padding-top: 20px;
}

/* 改下颜色 */
.trCorner li {
  color: rgb(190, 158, 111);;
}

/* 顶部导航颜色渐变 */
@keyframes color_turn {
  from {
    background-color: #e9e4f0bb;
    color: rgb(190, 158, 111);
  }

  to {
    background-color: rgb(222, 186, 138);
    color: beige;
  }
}

.change_color {
  animation: color_turn 500ms ease 1 forwards;
}

/*搜索框渐变*/
@keyframes color_turn2 {
  from {
    background-color: rgba(255, 255, 255, 0.8);
    color: black;
  }

  to {
    background-color: rgba(255, 255, 255, 1.0);
    color: black;
  }
}

.change_color2 {
  animation: color_turn2 500ms ease 1 forwards;
}

/* 左上角logo微调 */
.tlCorner {
  opacity: 95%;
}

/* 顶部图片 */
.topBg {
  width: 100%;
  height: 600px;
  margin: 0 auto;
  background-image: url(@/assets/img/mainTopBg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* 搜索栏 */
.searchBar {
  position: absolute;
  top: 26px;
  left: 30vw;
}

#searchInput {
  width: 408px;
  height: 28px;
  margin: 0 auto;
  border-radius: 40px;
  border: none;
  padding-left: 10px;
}

#searchSubmit {
  height: 27px;
  width: 27px;
  margin: 0 auto;
  background-image: url(@/assets/img/searchIcon.png);
  background-repeat: no-repeat;
  background-size: contain;
  border: none;
  background-color: transparent;
  position: relative;
  top: 10px;
}

#auto {
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  margin-top: 10px;
}

#auto_out {
  padding-left: 6px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: cm;
  border-bottom: 2px solid gray;

}

#auto_out h2 {
  margin: 0px;
}

.mainBox {
  width: 100%;
}

/* 宠物展示区 */
.PetDisplay {
  width: 83vw;
  height: fit-content;
  background-color: #fff;
  position: relative;
  top: 30px;
  margin: 0 auto;
}

/* .PetDisplay-scroll{
  width: 81vw;
  height: fit-content;
  background-color: #fff;
  position: relative;
  top: 160px;
} */

#pickMeUp {
  font-size: 30px;
  position: relative;
  left: 20px;
  top: -10px;
  color: gray;
  font-family: cm, serif;
}

/* 宠物分类 */
.petCategory {
  width: 90%;
  height: 104px;
  margin: 0 auto;
  position: relative;
  top: 30px;
  right: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.petCategory ul {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  margin: 0 auto;

}

.petCategory li {
  width: 100px;
  margin: 0 auto;
  border-radius: 50%;
  list-style: none;
  border: solid 5px rgb(222, 186, 138);
  box-shadow: 4px 4px 15px rgba(182, 148, 102, 0.704);

}

.petCategory #cats {
  background-image: url(@/assets/img/cat_category.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 0;
  z-index: 2;
}

.petCategory #dogs {
  background-image: url(@/assets/img/dog_category.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 0;
  z-index: 2;
}

.petCategory #reptiles {
  background-image: url(@/assets/img/reptiles_category.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 0;
  z-index: 2;
}

.petCategory #birds {
  background-image: url(@/assets/img/birds_category.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 0;
  z-index: 2;
}

.petCategory #fish {
  background-image: url(@/assets/img/fish_category.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 0;
  z-index: 2;
}

/*悬浮显示*/
#inform {
  background-color: rgba(222, 186, 138, 0.8);
  position: absolute;
  width: 220px;
  z-index: 2;
}

/* 宠物展示 */
.AllPets {
  width: 100%;
  height: fit-content;
  margin: 0 auto;
  position: relative;
  top: 140px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /*background-image: url(img/displayBG.jpg);*/
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center -110px;
  overflow: hidden;
  background-attachment: fixed;
}

.item {
  position: relative;
  left: 20px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.AllPets li {
  width: 19%;
  height: 248px;
  padding: 20px;
  margin-bottom: 20px;
  margin-right: 20px;
  position: relative;
  left: 10px;
  background-color: #fcf8f3;
  /*opacity: 90%;*/
  border: solid 2px black;
  list-style: none;
  text-align: center;
  font-family: cm;
  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, .25);
}

.AllPets li:hover {
  box-shadow: 0px 0px 30px #ffde71;
  transition: all .2s ease-in-out;
}

.AllPets li p {
  margin: 0 auto;
  position: relative;
  top: 10px;
}

.AllPets li h2 {
  font-size: 20px;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 78%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  color: rgb(190, 158, 111);

}

/*宠物展示中的详细按钮*/
.item button {
  width: 60px;
  background-color: transparent;
  position: absolute;
  left: 50%;
  top: 88%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  bottom: 8px;
  right: 120px;
  font-size: 14px;
}
</style>